<!DOCTYPE html>
<html lang="en">
<head>
<title>Categories</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Wish shop project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
<link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="plugins/malihu-custom-scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="plugins/jquery-ui-1.12.1.custom/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="styles/categories.css">
<link rel="stylesheet" type="text/css" href="styles/categories_responsive.css">
</head>
<body>

<div class="super_container">
	
	<!-- Header -->

	<header class="header">
		<div class="header_inner d-flex flex-row align-items-center justify-content-start">
			<div class="logo"><a href="#">Idol</a></div>
			<nav class="main_nav">
				<ul>
					<li><a href="index.html">主页</a></li>
					<li><a href="categories.html">照片</a></li>
					<li><a href="categories.html">视频</a></li>
					<li><a href="categories.html">艺术照</a></li>
					<li><a href="contact.html">联系我</a></li>
				</ul>
			</nav>

			<div class="burger_container d-flex flex-column align-items-center justify-content-around menu_mm"><div></div><div></div><div></div></div>
		</div>
	</header>

	<!-- Menu -->

	<div class="menu d-flex flex-column align-items-end justify-content-start text-right menu_mm trans_400">
		<div class="menu_close_container"><div class="menu_close"><div></div><div></div></div></div>
		<div class="logo menu_mm"><a href="#">Idol</a></div>
		<nav class="menu_nav">
			<ul class="menu_mm">
				<li class="menu_mm"><a href="#">主页</a></li>
				<li class="menu_mm"><a href="#">照片</a></li>
				<li class="menu_mm"><a href="#">视频</a></li>
				<li class="menu_mm"><a href="#">艺术照</a></li>
				<li class="menu_mm"><a href="#">联系我</a></li>
			</ul>
		</nav>
	</div>

	<!-- Home -->

	<div class="home">
		<div class="home_background parallax-window" data-parallax="scroll" data-image-src="images/twoAge/011.jpg" data-speed="0.8"></div>
		<div class="container">
			<div class="row">
				<div class="col">
					<div class="home_container">
						<div class="home_content">
							<div class="home_title">Idol</div>
							<div class="breadcrumbs">
								<ul>
									<li><a href="index.html">主页</a></li>
									<li>照片</li>
									<li>视频</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Products -->

	<div class="products">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<!-- Sidebar Left -->
					<div class="sidebar_left clearfix">

						<!-- Categories -->
						<div class="sidebar_section">
							<div class="sidebar_title">分组</div>
							<div class="sidebar_section_content">
								<ul>
									<li><a href="#">艺术照</a></li>
									<li><a href="#">生活点滴</a></li>
									<li><a href="#">小视频</a></li>
								</ul>
							</div>
						</div>

					</div>

				</div>
			</div>

			<div class="row products_container">
				<div class="col">
					<!-- Products -->

					<div class="product_grid">

						<!-- Product -->
						<div class="product">
							<div class="product_image"><img src="images/twoAge/004.jpg" alt=""></div>
							<div class="product_content clearfix">
								<div class="product_info">
									<div class="product_name"><a href="#">图片描述</a></div>
								</div>
							</div>
						</div>

						<!-- Product -->
						<div class="product">
							<div class="product_image"><img src="images/twoAge/006.jpg" alt=""></div>
							<div class="product_content clearfix">
								<div class="product_info">
									<div class="product_name"><a href="#">图片描述</a></div>
								</div>
							</div>
						</div>

						<!-- Product -->
						<div class="product">
							<div class="product_image"><img src="images/twoAge/007.jpg" alt=""></div>
							<div class="product_content clearfix">
								<div class="product_info">
									<div class="product_name"><a href="#">图片描述</a></div>
								</div>
							</div>
						</div>

						<!-- Product -->
						<div class="product">
							<div class="product_image"><img src="images/twoAge/009.jpg" alt=""></div>
							<div class="product_content clearfix">
								<div class="product_info">
									<div class="product_name"><a href="#">图片描述</a></div>
								</div>
							</div>
						</div>

						<!-- Product -->
						<div class="product">
							<div class="product_image"><img src="images/twoAge/012.jpg" alt=""></div>
							<div class="product_content clearfix">
								<div class="product_info">
									<div class="product_name"><a href="#">图片描述</a></div>
								</div>
							</div>
						</div>

						<!-- Product -->
						<div class="product">
							<div class="product_image"><img src="images/twoAge/013.jpg" alt=""></div>
							<div class="product_content clearfix">
								<div class="product_info">
									<div class="product_name"><a href="#">图片描述</a></div>
								</div>
							</div>
						</div>

						<!-- Product -->
						<div class="product">
							<div class="product_image"><img src="images/twoAge/014.jpg" alt=""></div>
							<div class="product_content clearfix">
								<div class="product_info">
									<div class="product_name"><a href="#">图片描述</a></div>
								</div>
							</div>
						</div>

						<!-- Product -->
						<div class="product">
							<div class="product_image"><img src="images/twoAge/016.jpg" alt=""></div>
							<div class="product_content clearfix">
								<div class="product_info">
									<div class="product_name"><a href="#">图片描述</a></div>
								</div>
								
							</div>
						</div>

						<!-- Product -->
						<div class="product">
							<div class="product_image"><img src="images/twoAge/018.jpg" alt=""></div>
							<div class="product_content clearfix">
								<div class="product_info">
									<div class="product_name"><a href="#">图片描述</a></div>
								</div>
								
							</div>
						</div>

						<!-- Product -->
						<div class="product">
							<div class="product_image"><img src="images/twoAge/021.jpg" alt=""></div>
							<div class="product_content clearfix">
								<div class="product_info">
									<div class="product_name"><a href="#">图片描述</a></div>
								</div>
								
							</div>
						</div>

						<!-- Product -->
						<div class="product">
							<div class="product_image"><img src="images/twoAge/023.jpg" alt=""></div>
							<div class="product_content clearfix">
								<div class="product_info">
									<div class="product_name"><a href="#">图片描述</a></div>
								</div>
								
							</div>
						</div>

						<!-- Product -->
						<div class="product">
							<div class="product_image"><img src="images/twoAge/024.jpg" alt=""></div>
							<div class="product_content clearfix">
								<div class="product_info">
									<div class="product_name"><a href="#">图片描述</a></div>
								</div>
								
							</div>
						</div>

					</div>
				</div>
					
			</div>

			<div class="row page_num_container">
				<div class="col text-right">
					<ul class="page_nums">
						<li><a href="#">01</a></li>
						<li class="active"><a href="#">02</a></li>
						<li><a href="#">03</a></li>
						<li><a href="#">04</a></li>
						<li><a href="#">05</a></li>
					</ul>
				</div>
			</div>

		</div>
		
		<!-- Sidebar Right -->

		<div class="sidebar_right clearfix">

			<!-- Promo 1 -->
			<div class="sidebar_promo_1 sidebar_promo d-flex flex-column align-items-center justify-content-center">
				<div class="sidebar_promo_image" style="background-image: url(images/twoAge/011.jpg)"></div>
				<div class="sidebar_promo_content text-center">
					<div class="sidebar_promo_button"><a href="#">check out</a></div>
				</div>
			</div>

			<!-- Promo 2 -->
			<div class="sidebar_promo_2 sidebar_promo">
				<div class="sidebar_promo_image" style="background-image: url(images/twoAge/004.jpg)"></div>
				<div class="sidebar_promo_content text-center">
					<div class="sidebar_promo_button"><a href="#">check out</a></div>
				</div>
			</div>
		</div>

	</div>

	<!-- Extra -->

	

	<!-- Newsletter -->

	<div class="newsletter">
		<div class="newsletter_content">
			<div class="newsletter_image" style="background-image:url(images/gallery.jpg)"></div>
			<div class="container">
			</div>
		</div>
	</div>

	<!-- Footer -->

	<footer class="footer">
		<div class="container">
			<div class="row">
				<div class="col text-center">
					<div class="footer_logo"><a href="#">Idol</a></div>
					<nav class="footer_nav">
						<ul>
							<li><a href="index.html">主页</a></li>
							<li><a href="categories.html">照片</a></li>
							<li><a href="categories.html">视频</a></li>
							<li><a href="categories.html">艺术照</a></li>
							<li><a href="contact.html">联系我</a></li>
						</ul>
					</nav>
					
					<div class="copyright">
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> 
</div>
				</div>
			</div>
		</div>
	</footer>
</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="styles/bootstrap4/popper.js"></script>
<script src="styles/bootstrap4/bootstrap.min.js"></script>
<script src="plugins/easing/easing.js"></script>
<script src="plugins/parallax-js-master/parallax.min.js"></script>
<script src="plugins/Isotope/isotope.pkgd.min.js"></script>
<script src="plugins/malihu-custom-scrollbar/jquery.mCustomScrollbar.js"></script>
<script src="plugins/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script src="js/categories_custom.js"></script>
</body>
</html>